<template>
  <div>
    <h1>这是父组件</h1>
    <hr/>
<!--  使用子组件  :message="父组件的变量"  message就是父组件要传递给子组件的数据，子组件在接收该数据时，必须定义一个相同的名称的变量  -->
    <child :message="parentMessage" @message-sent="handleMessage"></child>
  </div>
</template>

<script setup>
import child from './child.vue';

const parentMessage = '来自父组件的消息';
function handleMessage(message) {
  console.log('接收到了子组件的消息:', message);
}
</script>